
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  <title>简约音乐播放器</title>
  <link rel="stylesheet" href="./css/style.css" />
  <link rel="stylesheet" href="./css/HarmonyOS_Font.css" />
  <link rel="manifest" href="/manifest.json">
  <link href="./css/font-awesome.min.css" rel="stylesheet" />
</head>

<body>
  <!-- 提示 -->
  <div id="mode-toast" class="mode-toast"></div>

  <!-- 背景模糊层 -->
  <div id="bg-blur-layer"></div>
  <div id="bg-overlay"></div>

  <main class="main-box">
    <!-- 歌词容器-->
    <div class="lyrics-container" id="lyrics-container" style="display: flex">
      <div class="lyrics-header">
        <!-- 手机端显示的两行 -->
        <div class="mobile-title">
          <div class="lyrics-song-name" id="lyrics-song-name">歌曲名称</div>
          <div class="lyrics-artist-name" id="lyrics-artist-name">歌手名称</div>
        </div>

        <!-- 电脑端显示的一行 -->
        <div class="desktop-title" id="lyrics-title">歌曲名称 - 歌手名称</div>
      </div>
      <div class="lyrics-scroll">
        <div class="lyrics-scroll-inner" id="lyrics-scroll-inner">
          <ul id="lyrics-list"></ul>
        </div>
        <div class="lyrics-progress-bar" id="lyrics-progress-bar"></div>
      </div>
    </div>

    <!-- 音频列表模块 -->
    <div id="menu-overlay"></div>
    <div id="audio-list-panel">
      <ul id="audio-list"></ul>
    </div>


    <!-- 进度条 -->
    <div class="progress-bar-box">
      <div class="time-tag">
        <span id="current-time">00:00</span>
        <span id="total-time">00:00</span>
      </div>
      <div class="progress-bar" id="progress-bar-main">
        <div class="current-progress" id="current-progress"></div>
        <div class="progress-bg"></div>
      </div>
    </div>

    <!-- 占位符，留出空间 -->
    <div id="audio-controls-placeholder"></div>

    <!-- 控制按钮 -->
    <div class="audio-controls">
      <button id="menu-controlls">
        <i class="fa fa-music"></i>
      </button>
      <button id="prev-controlls">
        <i class="fa fa-step-backward"></i>
      </button>
      <button class="play-icon" id="play-controlls">
        <i class="fa fa-play"></i>
      </button>
      <button id="next-controlls">
        <i class="fa fa-step-forward"></i>
      </button>
      <button id="mode-toggle-controlls">
        <i class="fa fa-random"></i> <!-- 初始：随机播放 -->
      </button>

    </div>
  </main>

  <script src="./js/color-thief.min.js"></script>
  <script src="./js/style.js"></script>

</body>

</html>